<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        Vue监视数据的原理：
            1.Vue监视data所有数据
            2.如何检测对象中的数据?
                通过setter实现
                （1）对象后追加的数据Vue不做响应式处理
                （2）可以使用vm.$set()/Vue.set()添加
            3.如何检测数组中的数据？
                通过包裹数组更新元素的方法实现（重写）,即
                （1）调用原生的数组方法进行更新
                （2）重新解析模板，更新页面
                （3）push()/pop()/shift()/unshift()/splice()/sort()/reserve()
            4.注意：vm.$set()和Vue.set()不能给vm或者vm根数据对象添加数据!!!
     -->

    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄++</button>
        <button @click="addSex">点击添加学生的性别</button>
        <button @click="student.sex='未知'">修改性别</button>
        <button @click="addFriend">在列表首位添加一个朋友</button>
        <button @click="updateFirstFriendName">修改第一个朋友的名字</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateFirstHobby">修改第一个爱好为开车</button>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2>爱好:</h2>
        <ul>
            <li v-for="(item,index) in student.hobby" :key="index">
                {{item}}
            </li>
        </ul>
        <h2>朋友</h2>
        <ul>
            <li v-for="(item,index) in student.friend" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#root",
            data: {
                student: {
                    name: "张三",
                    age: 18,
                    hobby: ["吃饭", "喝酒", "弹吉他"],
                    friend: [
                        { name: "李四", age: 20 },
                        { name: "王五", age: 19 }
                    ]
                }
            },
           methods: {
               addSex(){
                this.$set(this.student,"sex","男");
               },
              addFriend(){
                  this.student.friend.unshift({name:"罗老师",age:40});
              },
              updateFirstFriendName(){
                  this.student.friend[0].name = "jack";
              },
              addHobby(){
                  this.student.hobby.push("运动");
              },
              updateFirstHobby(){
                //   this.student.hobby.splice(0,1,"开车");
                Vue.set(this.student.hobby,0,"开车"); 
              }
           }
        })

    </script>
</body>

</html>